<template>
  <uni-nav-bar title="新增大客户" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <view class="package">
    <view class="space-between">
      <view>大客户名称</view>
      <input class="uni-input" placeholder="请输入大客户名称" v-model="name" />
    </view>
    <view class="space-between top">
      <view>手机号码</view>
      <input class="uni-input" maxlength="11" placeholder="请输入手机号码" v-model="tel" />
    </view>
    <view class="space-between top">
      <view>城市</view>
      <pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion">
        <text :style="{color:region?'':'#808080'}">{{region?region:'请选择省市区'}}</text>
      </pick-regions>
    </view>
    <view class="space-between top">
      <view>运营商</view>
      <hpy-form-select :dataList="OperatorList" :value="'1'" text="name" name="value" @change="consolu"
        :title="Operator" :Text="Operator" :icon='true' />
    </view>
  </view>
  <view class="add" @click="submit()">下一步</view>
</template>

<script setup lang="ts">
  import { navBack, navTo } from '@/utils/navigator';
  import { errorToast, showLoading, successToast } from '@/utils/prompt';
  import pickRegions from '@/components/pick-regions/pick-regions.vue'
  import { toPublish } from '@mqtt';
  import { ref } from 'vue';
  /**
    * 新增大客户
    * @param {String} name  大客户名称
    * @param {String} tel  手机号码
    * @param {String} Operator  运营商名称
    * @param {Number} partners_id  运营商ID
    * @param {Array} OperatorList  运营商列表
    * @param {String} region  地区信息
    * @return
    */
  const name = ref('') //大客户名称
  const tel = ref('') //手机号码
  const partners_id = ref(1)//运营商ID
  const Operator = ref('景岚'); //运营商
  const OperatorList = [{ name: '景岚', id: 1 }, { name: '八六三', id: 2 }]; // 运营商
  const region = ref('') //地区信息

  //切换运营商
  function consolu(e : any) {
    console.log(JSON.stringify(e))
    Operator.value = e.data.name;
    partners_id.value = e.data.id;
  }
  // 获取选择的地区
  function handleGetRegion(num : any) {
    region.value = num.map((item : any) => item.name).join('-')
  }
  // 正则手机号码
  function validatePhone() {
    const rule = /^1[3-9]\d{9}$/;
    return rule.test(tel.value);
  }
  function submit() {
    if (!name.value) {
      errorToast('请输入大客户名称')
      return
    }
    if (!tel.value) {
      errorToast('请输入手机号码')
      return
    } else if (!validatePhone()) {
      errorToast('请输入有效的手机号码')
      return
    }
    if (!region.value) {
      errorToast('请选择省市区')
      return
    }
    submit_s()
  }
  /**
    * 提交新增大客户
    * @param {String} name  大客户名称
    * @param {String} mobile  手机号码
    * @param {Number} partners_id  运营商ID
    * @param {String} address_city  地区信息
    * @return
    */
  function submit_s() {
    showLoading('正在提交');
    const payload = {
      partners_id: partners_id.value,
      address_city: region.value,
      mobile: tel.value,
      name: name.value
    };
    toPublish('control/addCustomers', payload, (obj : any) => {
      const { code, msg, data } = obj;
      if (code === 1) {
        successToast('提交成功');
        setTimeout(() => {
          navTo('administrator/keyaccount/addFill?id=' + data.id)
        }, 1000)
      } else {
        errorToast(msg);
      }
    });
  }
</script>

<style scoped lang="less">
  .add {
    width: 480rpx;
    height: 100rpx;
    background: linear-gradient(-10deg, #2C96F9, #1B91FF);
    border-radius: 5px;
    text-align: center;
    line-height: 100rpx;
    color: #fff;
    margin: 40rpx auto 20rpx;
    font-size: 32rpx;
  }

  .package {
    input {
      text-align: right;
    }
  }

  .top {
    margin-top:20rpx;
  }
</style>
<style>
  .top>>>.select-picker {
    justify-content: flex-end;
  }
</style>